<template>
  <div class="preOrder-index">
    <div class="order-top">
      <div @click="$router.push('/cart')">
        <i class="icon iconfont icon-jiantou1"></i>
      </div>
      <div class="center">确认订单</div>
    </div>
    <div class="line"></div>
    <!-- 地址显示 -->
    <div class="address bg-fff flex jc-sb aic" @click="toAddress">
      <div class="select overh flex">
        <i class="icon iconfont icon-shouhuodizhi"></i>

        <div v-if="addressInfo.length" class="pl-10">
          <div class="flex">
            <span class="f15 select2">{{ addressInfo[0].name }}</span>
            <span>&nbsp;</span>
            <span class="f15 f999 mb-10">{{ addressInfo[0].tel }}</span>
          </div>
          <span class="f14">{{
            addressInfo[0].country +
            addressInfo[0].province +
            addressInfo[0].city +
            addressInfo[0].county +
            addressInfo[0].addressDetail
          }}</span>
        </div>

        <div class="" v-else>
          <span class="select2">请选择地址</span>
        </div>
      </div>

      <i class="f999 icon iconfont icon-jiantou"></i>
    </div>
    <!-- 中间内容 -->
    <div class="container">
      <!-- 第一次运费 -->
      <div class="pt-10 f999 f13">
        <span>运费{{ freight }}元</span>
        <span>（满100元免运费）</span>
      </div>

      <!-- 商品列表 -->
      <ul class="list">
        <li
          class="item flex aic pt-13 pb-13"
          v-for="item in lists"
          :key="item.cartId"
          @click="$router.push('/home/goodDetail/' + item.productId)"
        >
          <img :src="item.imgUrl" alt="" class="img" />

          <div class="fg1 text ml-5">
            <div>
              <p class="f14">{{ item.masterName }}</p>
              <p class="f999 overh f12 mt-10">
                {{ item.slaveName }}
              </p>
            </div>
            <div class="f12 flex aic jc-sb">
              <div>
                <span>￥</span>
                <b class="f14">{{ Math.floor(item.price / 100) }}</b>
                <span>.{{ item.price % 100 }}</span>
              </div>
              <div class="f999 last2">x{{ item.buyNum }}</div>
            </div>
          </div>
        </li>
      </ul>

      <!-- 商品总金额 -->
      <div class="flex aic jc-sb mt-15">
        <span class="f999">商品总金额</span>
        <span class="base">￥{{ totalMoney }}</span>
      </div>

      <!-- 运费2 -->
      <div class="flex aic jc-sb mt-20 pb-5 mb-10">
        <span class="f999">运费</span>
        <span class="base">￥{{ freight }}</span>
      </div>
    </div>

    <!-- 下部单元格 -->
    <div class="bottom-juan">
      <div class="item flex jc-sb aic">
        <div>
          <span class="icon iconfont icon-youhuiquan base"></span>
          <span class="f16">优惠卷</span>
        </div>
        <div>
          <span class="f14 f999">0张卷可用</span>
          <span class="f999 iconfont icon-jiantou"></span>
        </div>
      </div>

      <div class="item flex jc-sb aic">
        <div>
          <span class="icon iconfont icon-youhuiquan base"></span>
          <span class="f16">苏打卷</span>
        </div>
        <div>
          <span class="f14 f999">0张卷可用</span>
          <span class="f999 iconfont icon-jiantou"></span>
        </div>
      </div>

      <div class="item flex jc-sb aic">
        <div>
          <span class="icon iconfont icon-zuanshi_o base"></span>
          <span class="f16">余额</span>
        </div>
        <div>
          <span class="f14 base">￥0.00</span>
          <span class="f999 iconfont icon-jiantou"></span>
        </div>
      </div>

      <div class="item flex jc-sb aic">
        <div>
          <span class="icon iconfont icon-fapiao base"></span>
          <span class="f16">发票</span>
        </div>
        <div>
          <span class="f14 f999">不开发票</span>
          <span class="f999 iconfont icon-jiantou"></span>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <!-- <div class="submit pl-16 pr-16 flex aic f14 jc-sb">
      <div class="f14 fg1 price2">
        <div class="price flex aic">
          <span class="f14">合计：</span>
          <div class="red f12">￥<span class="f20">291</span>.00</div>
        </div>
      </div>
      <div class="btn" @click="show = true">提交订单</div>
    </div> -->

    <van-submit-bar
      :price="totalPrice"
      button-text="提交订单"
      @submit="show = true"
    />

    <van-action-sheet v-model="show" title="请选择支付方式" @select="onSelect">
      <van-radio-group v-model="radio">
        <div class="pay2 flex jc-sb">
          <span class="icon-weixin iconfont icon-weixinzhifu"></span
          ><van-radio name="1"></van-radio>
        </div>
        <div class="pay2 flex jc-sb">
          <span class="icon-zhifubao iconfont icon-zhifubao"></span
          ><van-radio name="2"></van-radio>
        </div>
      </van-radio-group>
      <div class="pl-25 pr-25 mt-25">
        <van-button type="danger w100" @click="toPay(radio)"
          >立即支付</van-button
        >
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import { get, post } from "@/request/index";
export default {
  data() {
    return {
      preOrderId: 0,
      // 商品详情
      lists: [],
      result: {},
      // 弹出支付方式选择
      show: false,
      // 默认选择微信支付
      radio: "1",
      // // 总的地址
      // addressList: [],
      // 挑选出要显示的地址
      addressInfo: [],
    };
  },
  created() {
    this.getGoods();
    // this.result = this.$route.query.preOrderId;

    // 获取收货地址
    this.getAddress();
  },
  methods: {
    getGoods() {
      this.preOrderId = this.$route.query.preOrderId;
      console.log("id", this.preOrderId);
      post("/preOrder/detail", { preOrderId: this.preOrderId })
        .then((res) => {
          console.log("获取预订单列表", res);
          this.result = res.result;
          console.log("商品列表", this.result);
          this.lists = this.result.carts;
          console.log("商品列表详情222", this.lists);
        })
        .catch((err) => console.log("获取预订单失败", err));
    },

    onSelect() {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false;
    },
    toPay(radio) {
      // 这里请求的应该是order订单，路由传参传地址
      console.log("支付方法", radio);
      let obj = {
        addressInfo: this.addressInfo,
        allFee: this.totalPrice,
        preOrderId: this.preOrderId,
      };
      post("/order/create", obj)
        .then((res) => {
          console.log("获取支付订单", res);
          let result = res.result;
          let obj = {
            radio,
            result,
          };
          this.$router.push({
            path: "/order/pay",
            query: { orderObj: JSON.stringify(obj) },
          });
        })
        .catch((err) => console.log("支付失败", err));
    },
    // 路由传参，传地址列表
    toAddress() {
      this.$router.push({
        path: "/address/list",
        query: { preOrderId: this.$route.query.preOrderId },
      });
    },
    // 获取地址列表并判断默认地址
    getAddress() {
      // 1. 如果query有手机号码参数，则赋给它
      if (this.$route.query.tel) {
        this.addressInfo[0] = this.$route.query;
      } else {
        // 2 .如果没有，则请求默认地址，
        get("/address/all")
          .then((res) => {
            // console.log("地址", res.list);
            // this.addressList = res.list;

            this.addressInfo = res.list.filter((item) => {
              return item.isDefault;
            });

            console.log("默认地址", this.addressInfo);
          })
          .catch((err) => console.log("获取默认地址错误", err));
        // 3. 如果没有默认地址，则默认显示
      }
    },
  },
  computed: {
    totalMoney() {
      return (this.result.totalMoney / 100).toFixed(2);
    },
    freight() {
      return (this.result.expressFee / 100).toFixed(2);
    },
    totalPrice() {
      return this.result.totalMoney * 1 + this.result.expressFee * 1;
    },
  },
};
</script>

<style lang="less">
@import "./preOrder.less";

.preOrder-index {
  .pay2 {
    padding: 13px 20px;
    .icon-weixin {
      color: #09bb07;
      font-size: 20px;
    }
    .icon-zhifubao {
      color: #1296db;
      font-size: 20px;
    }
  }
}
</style>